<template>
    <el-form-item :label="label">
        <div v-if="scoped" class="grid">
            <template v-for="n in 2" :key="n">
                <vxe-date-picker  v-model="data[n-1]" v-bind="$attrs" :class="{scoped:n==1}" :transfer="true"/>
            </template>
        </div>
        <vxe-date-picker v-else v-model="data" v-bind="$attrs" :transfer="true"/>
    </el-form-item>
</template>
<script setup lang="ts">
import { ref,watch } from 'vue';
const {label,scoped} = defineProps<{
    label:string
    /**是否展示范围 */
    scoped?:boolean
}>()
const value = defineModel()
const data = ref(scoped?[]:'')
if(scoped)watch(data,val=>value.value = JSON.parse(JSON.stringify(val)),{deep:true});
else watch(data,val=>value.value = val);
</script>
<style scoped>
.grid{
    width: 100%;
    display: grid;
    grid-template-columns: calc(50% - 15px) calc(50% - 15px);
    gap: 30px;
}
.vxe-date-picker{
    width:100%;
}
.vxe-date-picker.scoped::after{
    content:"~";
    position: absolute;
    right: -20px;
}
</style>